<template>
  <div class="deployDetailEmpower" :style="{ height: height + 'px' }">
    <div style="display: flex;">
      <p class="title">支持App认证</p>
      <el-switch v-model="onShow" class="switch" @change="handleSwitch($event)"/>
    </div>
    <div style="display: flex">
      <el-form :model="ruleForm" :rules="rules" label-width="120px">
        <el-form-item label="App授权配置" prop="region">
          <el-select v-model="ruleForm.region">
            <el-option label="app_7165" value="shanghai" />
            <el-option label="App-2" value="beijing" />
            <el-option label="App-3" value="beijing" />
            <el-option label="App-4" value="beijing" />
          </el-select>
        </el-form-item>
      </el-form>
      <p class="createApp" @click="creatApp">创建应用</p>
    </div>
    <p class="appInterfaceSetting">
      <span class="title">App接口公网地址:{{public_url}}</span>
    </p>
    <el-table
      class="AppData"
      :data="setup1_input"
      :header-cell-style="{
          'background': 'rgb(243,245,252) !important',
          'color': '#000',
          'border': 'none !important'
        }"
      style="width: 80%">
      <el-table-column prop="app_name" label="名称" />
      <el-table-column prop="app_key" label="公钥（账号）" />
      <el-table-column prop="app_secret" label="私钥（密码）" />
    </el-table>
  </div>
  <el-dialog v-model="dialogVisible" title="创建应用" width="30%" draggable :modal="false" :close-on-click-modal="false">
    <el-form :model="dialogData" :rules="rulesDialog" label-width="120px" style="margin-left: -20px;width: 100%">
      <el-form-item prop="name">
        <template #label>
            <span style="font-size: 12px;color: #1D1D1D;font-weight: bold">
              <span>名称</span>
            </span>
        </template>
        <el-input v-model="dialogData.name" />
      </el-form-item>
      <el-form-item>
        <template #label>
            <span style="font-size: 12px;color: #1D1D1D;font-weight: bold">
              <span>描述:</span>
            </span>
        </template>
        <el-input
          v-model.trim="dialogData.desc"
          type="textarea"
          :rows="4"
          show-word-limit maxlength="100"
          placeholder="请输入"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取消</el-button>
        <el-button size="small" type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">


import {
  setApiAuthHandle,//设置是否支持认证
} from "src/api/model";

const router = useRouter();
const projectId = router.currentRoute.value.params.project_id

import { reactive, ref } from 'vue'
const loading = ref(false)
const onShow = ref(false)
const height = ref(36);
const public_url = ref('');

import type { FormInstance, FormRules } from 'element-plus'
import {modelStore} from "stores/model";
import {useRouter} from "vue-router";
const modelId = modelStore().model_id

interface RuleForm {
  region: string
}
const ruleForm = reactive<RuleForm>({
  region: 'app_7165',
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
})

interface DialogData {
  name: string,
  desc: string
}
const dialogData = reactive<DialogData>({
  name: '',
  desc: ''
})
const rulesDialog = reactive<FormRules<DialogData>>({
  name: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
})
const setup1_input = ref([
  {
    app_name: '',
    app_key: '',
    app_secret: ''
  },
]);
initEvent();
function initEvent(){
  let data = JSON.parse(JSON.stringify(modelStore().getApiEndpoint));
  onShow.value = data.is_auth_required;
  public_url.value = data.public_access_url;
  setup1_input.value[0].app_key = data.app_key;
  setup1_input.value[0].app_name = data.app_name;
  setup1_input.value[0].app_secret = data.app_secret;
}


// setApiAuth(onShow.value);//设置是否支持认证
function setApiAuth(bool:boolean){
  setApiAuthHandle(projectId, modelId,{is_auth_required: bool}).then( (res:any) =>{
    console.log('设置是否支持认证',res);
  })
}


//点击创建应用
const dialogVisible = ref(false)
const creatApp = () => {
  dialogVisible.value = true;
}

//app认证按钮打开
const handleSwitch = (ev:any) => {
  if( ev ){
    height.value = 250;
    setApiAuth(onShow.value);
  } else {
    height.value = 36
  }
}
</script>

<style scoped lang="scss">

.deployDetailEmpower {
  margin-top: 10px;
  width: 100%;
  height: 80px;
  overflow: hidden;
  background-color: rgb(243,245,252);
  .title {
    padding: 10px;
    font-size: 12px;
    color: #1D1D1D;
    font-weight: 600;
    margin-bottom: 5px;
    margin-left: 10px;
  }
  .switch {
    margin-top: 5px;
  }
  .appInterfaceSetting {
    font-size: 13px;
    color: #1D1D1D;
    .title {
      font-weight: bold;
    }
  }
  .AppData {
    margin-left: 10px;
    .el-table__header {
      background-color: #5c5858;
    }
  }
}
.createApp {
  cursor: pointer;
  margin-left: 10px;
  color: #3D5CE4;
  font-size: 13px;
  font-weight: bold;
  line-height: 30px;
}
::v-deep .el-form-item__label {
  color: #1D1D1D!important;
  font-weight: bold;
  font-size: 13px;
}
</style>
